<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="loading">
      <el-row>
        <el-col :span="6">
          <el-form-item label="用户名：" label-width="100px">
            {{result.nickName}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="答题数量">
            {{result.total}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item v-if="open">
        <result-pie-chart :result-data="resultData"></result-pie-chart>
      </el-form-item>


      <el-form-item label="" prop="ywtz">
        <el-tabs v-model="activeName">

          <el-tab-pane v-for="(item,index) in analysis" :key="index" :label="item.name" :name="item.bm">
            <p v-html="item.ywtz"></p>
<!--            <vue-ueditor-wrap v-model="item.ywtz" :config="myConfig" disabled=""></vue-ueditor-wrap>-->
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item size="large">
        <el-button @click="closeForm">关 闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ResultPieChart from "@/views/dt/result/resultPieChart";
import VueUeditorWrap from "vue-ueditor-wrap";
import {getResult} from "@/api/dt/result";

export default {
  components: {
    VueUeditorWrap,ResultPieChart
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 题库类型
      typeList: [],
      // 状态字典
      statusOptions: [{
        dictLabel: "启用",
        dictValue: "1"
      },{
        dictLabel: "禁用",
        dictValue: "0"
      }],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      rules: {},
      resultData: [],
      result: {},
      analysis:[],
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 540,
        // 初始容器宽度
        initialFrameWidth: '100%',
        //启用自动保存
        enableAutoSave: true,
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！部署在国外的服务器，如果无法访问，请自备梯子）
        serverUrl: process.env.VUE_APP_BASE_API + '/api/ueditor/controller?userId='+this.$store.getters.userInfo.userId,
        // serverUrl:'http://35.201.165.105:8000/controller.php',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: '/ueditor/',
        zIndex: 1
      },
      activeName: 'A'
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询九型人格分析列表 */
    getList() {
      this.loading = true;
      console.log(this.$route.query.id);
      this.form.id = this.$route.query.id;
      if( this.form.id != "" && this.form.id != undefined && this.form.id != null){
        getResult(this.form.id).then(response => {
          this.form = response.data;
          this.resultData = response.data.record;
          this.result = response.data.result;
          this.analysis = response.data.analysis;
          if (this.analysis && this.analysis.length > 0) {
            this.activeName = this.analysis[0].bm
          }
          this.open = true;
          this.title = "测试结果";
        });
      }
      this.loading = false;
    },
    // 状态字典翻译
    stateFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    closeForm() {
      this.$store.dispatch("tagsView/delView", this.$route);
      var location = '/dt/result';
      this.$router.push({'path':location, name:'Result', 'query': {}})
    }

  }
};
</script>
<style>
.dialogClass {
  top: 2vh;
}
.avatar-uploader i {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader i:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
